/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable no-template-curly-in-string */
/* eslint-disable no-shadow */
import { useControlController } from '@ibiz-template/vue3-util';
import { PropType, defineComponent } from 'vue';
import { ISysMap } from '@ibiz/model-core';
import { IControlProvider } from '@ibiz-template/runtime';
import { TileMapController } from './tile-map-controller';

export const TileMap = defineComponent({
  name: 'TileMap',
  props: {
    modelData: { type: Object as PropType<ISysMap>, required: true },
    context: { type: Object as PropType<IContext>, required: true },
    params: { type: Object as PropType<IParams>, default: () => ({}) },
    provider: { type: Object as PropType<IControlProvider> },
    mdctrlActiveMode: { type: Number, default: undefined },
    loadDefault: { type: Boolean, default: true },
  },
  setup(props) {
    const c = useControlController((...args) => new TileMapController(...args));
    // 配置参数
    const config = {
      view: {
        projection: 'EPSG:3857',
        // center: [110.5, 35],
        // zoom: 15,
        center: [110, 35],
        zoom: 5,
        maxZoom: 15,
        minZoom: 5,
      },
      tile: {
        type: 'XYZ',
        url: 'http://172.16.100.230/map/',
      },
    };
    // 初始化函数
    const initFunction = (args: any) => {
      c.setCompRef(args);
    };
    // 行为函数
    const actionFunction = (args: any) => {
      console.log(actionFunction)
    };
    return { config, initFunction, actionFunction};
  },
  render() {
    return (
      <iBizMapControl
        config={this.config}
        onInited={this.initFunction}
        onMapAction={this.actionFunction}
      ></iBizMapControl>
    );
  },
});
export default TileMap;
